<style lang="less">
    @import 'index.less';
</style>
<template>
    <div class="sub-navbar" :style="{top: top + 'px',position: position, zIndex: 20,width: '100%',height: '50px', paddingRight: '10px'}">
        <slot>
            <div>sticky</div>
        </slot>
    </div>

</template>

<script>
    export default {
        name: 'Sticky',
        props: {
            stickyTop: {
                type: Number,
                default: 0
            },
            zIndex: {
                type: Number,
                default: 10
            },
            className: {
                type: String,
                default: 'sub-navbar'
            }
        },
        data() {
            return {
                position: 'relative',
                top: -10
            }
        },
        mounted() {
            let page = document.getElementsByClassName("single-page-con")[0];
            this.width = page.clientWidth + 'px';
            page.addEventListener('scroll', this.handleScroll)
        },
        activated() {
            this.handleScroll()
        },
        destroyed() {
            window.removeEventListener('scroll', this.handleScroll)
        },
        methods: {
            handleScroll(e) {
                this.top = e.target.scrollTop - 10;
                this.position = 'relative';

            }
        }
    }
</script>